<template>
  <div class="blog-box">
    <div class="blog-cover">
      <a :href="/detail/ + blog.id" class="cover">
        <img :src="path + '/' + blog.cover" alt="">
      </a>
    </div>
    <div class="blog-wrapper">
      <div class="title">
        <a :href="'/detail/' + blog.id" v-text="blog.title"></a>
      </div>
      <div class="info">
        <span v-if="blog.isTop == 1" style="color: rgb(255, 114, 66);">置顶</span>
        <span v-if="blog.isTop == 1" class="separator">|</span>
        <span>{{ blog.createTime }}</span>
        <span class="separator">|</span>
        <span>{{ blog.typeStr }}</span>
        <span class="separator">|</span>
        <span>阅读量{{ blog.views }}</span>
      </div>
      <div class="content" v-text="blog.content"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['blog'],
  data() {
    return {
      path: process.env.VUE_APP_BASE_API
    }
  },
  methods: {

  }
}
</script>

<style scoped>
.blog-box {
  border-radius: 12px 8px 8px 12px;
  display: flex;
  align-items: center;
  height: 280px;
  width: 100%;
  margin-top: 20px;
  background: #fff;
  color: #4c4948;
  box-shadow: 0 4px 8px 6px rgba(7,17,27,.06);
  transition: all .3s;
  max-width: 100%;
  outline: none;
  text-decoration: none;
  overflow-wrap: break-word;
  position: relative;
  white-space: normal;
  will-change: box-shadow;
}

.blog-box:hover {
  box-shadow: 0 4px 12px 12px rgba(7,17,27,.15);
}

.blog-cover {
  overflow: hidden;
  height: 100%;
  width: 45%;
  border-radius: 8px 0 0 8px!important;
  order: 0;
}

.blog-wrapper {
  padding: 0 2.5rem;
  width: 55%;
  font-size: 14px;
  color: #4c4948;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: 1.5;
}

.title {
  overflow-wrap: break-word;
  white-space: normal;
}

.title a {
  font-size: 1.5rem;
  transition: all .3s;
  color: #4c4948;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.4;
}

.title a:hover {
  color: #8e8cd8;
}

.info {
  font-size: 95%;
  color: rgba(0,0,0,.54);
  line-height: 2;
  margin: .375rem 0;
}

.content {
  line-height: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
  white-space: normal;
}

.separator {
  margin: 0 6px;
  color: #858585;
  line-height: 2;
}

.cover img {
  width: 100%;
  height: 100%;
  min-width: 397px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
</style>
